.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  inset: 0;
  margin: auto;
  background-color: #5a717b;
  border-radius: 2px;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  color: #fff;
  overflow: hidden;
}

.center {
  position: absolute;
  width: 400px;
  height: 130px;
  inset: 0;
  margin: auto;
  transform: perspective(60px);
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  width: 140px;
  height: 130px;
  top: 0;
  left: 130px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.2);
}
.card .top {
  width: 100%;
  height: 30px;
  background-color: #ff9800;
}
.card .content {
  padding: 17px 14px;
}
.card .line {
  height: 4px;
  background: #e9e9e9;
  margin-bottom: 6px;
}

.card-1 {
  animation: switch-1 5s ease-in-out infinite both;
}

.card-2 {
  animation: switch-2 5s ease-in-out infinite both;
}

.card-3 {
  animation: switch-3 5s ease-in-out infinite both;
}

@keyframes switch-1 {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.2);
  }
  33.33% {
    transform: translate3d(145px, 0, -45px);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }
  66.67% {
    transform: translate3d(-145px, 0, -45px);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }
}
@keyframes switch-2 {
  33.33% {
    transform: translate3d(0, 0, 0);
    box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.2);
  }
  66.67% {
    transform: translate3d(145px, 0, -45px);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }
  0%, 100% {
    transform: translate3d(-145px, 0, -45px);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }
}
@keyframes switch-3 {
  66.67% {
    transform: translate3d(0, 0, 0);
    box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.2);
  }
  0%, 100% {
    transform: translate3d(145px, 0, -45px);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }
  33.33% {
    transform: translate3d(-145px, 0, -45px);
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
  }
}